<template>
	<a-drawer
		title="柜门权限"
		:width="600"
		:visible="visible"
		:destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-tabs v-model:activeKey="activeKey" centered>
			<a-tab-pane key="compactMode" tab="精简模式">
				<a-list :data-source="respData.cabinetDoorPermAuthorizedList">
					<template #renderItem="{ item }">
						<a-list-item>
							<div class="list-item">
								<div>{{ item.userName }}（{{ item.account }}）</div>
								<a-tag color="blue">{{ item.extInfo }}</a-tag>
								<div>{{ item.permStartTime }}~{{ item.permEndTime }}</div>
							</div>
						</a-list-item>
					</template>
					<template #header>
						<div class="subtitle">
							<tag-outlined />
							已授权{{ respData.cabinetDoorPermAuthorizedList.length }}人
						</div>
					</template>
				</a-list>
				<a-list :data-source="respData.cabinetDoorPermFrozenList">
					<template #renderItem="{ item }">
						<a-list-item>
							<div class="list-item">
								<div>{{ item.userName }}（{{ item.account }}）</div>
								<a-tag color="blue">{{ item.extInfo }}</a-tag>
								<div>{{ item.frozenStartTime }}~{{ item.frozenEndTime }}</div>
							</div>
						</a-list-item>
					</template>
					<template #header>
						<div class="subtitle">
							<tag-outlined />
							已冻结{{ respData.cabinetDoorPermFrozenList.length }}人
						</div>
					</template>
				</a-list>
			</a-tab-pane>
			<a-tab-pane key="detailedMode" tab="详细模式">
				<div>
					<a-divider>
						<safety-certificate-outlined spin />
						<span class="title">柜门</span>
					</a-divider>
					<a-list :data-source="respData.cabinetDoorPermAuthorizedList">
						<template #renderItem="{ item }">
							<a-list-item>
								<div class="list-item">
									<div>{{ item.userName }}（{{ item.account }}）</div>
									<a-tag color="blue">{{ item.extInfo }}</a-tag>
									<div>{{ item.permStartTime }}~{{ item.permEndTime }}</div>
								</div>
							</a-list-item>
						</template>
						<template #header>
							<div class="subtitle">
								<tag-outlined />
								已授权{{ respData.cabinetDoorPermAuthorizedList.length }}人
							</div>
						</template>
					</a-list>
					<a-list :data-source="respData.cabinetDoorPermFrozenList">
						<template #renderItem="{ item }">
							<a-list-item>
								<div class="list-item">
									<div>{{ item.userName }}（{{ item.account }}）</div>
									<a-tag color="blue">{{ item.extInfo }}</a-tag>
									<div>{{ item.frozenStartTime }}~{{ item.frozenEndTime }}</div>
								</div>
							</a-list-item>
						</template>
						<template #header>
							<div class="subtitle">
								<tag-outlined />
								已冻结{{ respData.cabinetDoorPermFrozenList.length }}人
							</div>
						</template>
					</a-list>
				</div>

				<div>
					<a-divider>
						<safety-certificate-outlined spin />
						<span class="title"> 柜子</span></a-divider
					>
					<a-list :data-source="respData.cabinetInfoPermAuthorizedList">
						<template #renderItem="{ item }">
							<a-list-item>
								<div class="list-item">
									<div>{{ item.userName }}（{{ item.account }}）</div>
									<div>{{ item.permStartTime }}~{{ item.permEndTime }}</div>
								</div>
							</a-list-item>
						</template>
						<template #header>
							<div class="subtitle">
								<tag-outlined />
								已授权{{ respData.cabinetInfoPermAuthorizedList.length }}人
							</div>
						</template>
					</a-list>
					<a-list :data-source="respData.cabinetInfoPermFrozenList">
						<template #renderItem="{ item }">
							<a-list-item>
								<div class="list-item">
									<div>{{ item.userName }}（{{ item.account }}）</div>
									<div>{{ item.frozenStartTime }}~{{ item.frozenEndTime }}</div>
								</div>
							</a-list-item>
						</template>
						<template #header>
							<div class="subtitle">
								<tag-outlined />
								已冻结{{ respData.cabinetInfoPermFrozenList.length }}人
							</div>
						</template>
					</a-list>
				</div>

				<div>
					<a-divider>
						<safety-certificate-outlined spin />
						<span class="title"> 组柜</span></a-divider
					>
					<a-list :data-source="respData.cabinetGroupPermAuthorizedList">
						<template #renderItem="{ item }">
							<a-list-item>
								<div class="list-item">
									<div>{{ item.userName }}（{{ item.account }}）</div>
									<div>{{ item.permStartTime }}~{{ item.permEndTime }}</div>
								</div>
							</a-list-item>
						</template>
						<template #header>
							<div class="subtitle">
								<tag-outlined />
								已授权{{ respData.cabinetGroupPermAuthorizedList.length }}人
							</div>
						</template>
					</a-list>
					<a-list :data-source="respData.cabinetGroupPermFrozenList">
						<template #renderItem="{ item }">
							<a-list-item>
								<div class="list-item">
									<div>{{ item.userName }}（{{ item.account }}）</div>
									<div>{{ item.frozenStartTime }}~{{ item.frozenEndTime }}</div>
								</div>
							</a-list-item>
						</template>
						<template #header>
							<div class="subtitle">
								<tag-outlined />
								已冻结{{ respData.cabinetGroupPermFrozenList.length }}人
							</div>
						</template>
					</a-list>
				</div>
			</a-tab-pane>
		</a-tabs>

		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
		</template>
	</a-drawer>
</template>

<script setup name="bizCabinetDoorPermission">
	import bizCabinetPermissionReagentApi from '@/api/biz/bizCabinetPermissionReagentApi'

	const visible = ref(false)
	const activeKey = ref('compactMode')
	const respData = ref({
		cabinetGroupPermAuthorizedList: [],
		cabinetGroupPermFrozenList: [],
		cabinetInfoPermAuthorizedList: [],
		cabinetInfoPermFrozenList: [],
		cabinetDoorPermAuthorizedList: [],
		cabinetDoorPermFrozenList: []
	})
	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		bizCabinetPermissionReagentApi
			.bizCabinetPermissionListForDoor({
				cabinetDoorId: record.id,
				cabinetInfoId: record.cabinetInfoId,
				cabinetGroupId: record.cabinetGroupId
			})
			.then((res) => {
				console.log(res)
				respData.value = res
			})
			.finally(() => {})
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
<style scoped>
	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.title {
		font-weight: bold;
		color: #333;
	}

	.subtitle {
		font-weight: bold;
		color: #666;
	}
</style>
